<template>
    <div class="needExa">
        <div class="needExa_top">
		    <div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">已通过<i class="el-icon-close"></i></div>
		</div>

        <!-- 头部导航 -->
        <div class="navTab">
            <div class="navTabList">
                <div class="navTabItem" :class="{'navTabItem_active':navIndex==index}" v-for="(item,index) in navTab" :key="index" @click="navFn($event)" :data-index='index'>{{item}}<div class="navBorder" v-if="navIndex==index"></div></div>
            </div>
        </div>
        <div style="padding: 15px 20px 0">
          卖场：
          <el-select
            v-model="marketId"
            clearable
            @change="selectMarket"
            filterable
            placeholder="请选择卖场"
          >
            <el-option
              v-for="item in marketList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>

        <!-- 表格（设计师） -->
        <div class="needExa_table" >
            <div class="needExa_bottom_table">
                <table>
                    <tr>
                        <th></th>
                        <th>序号</th>
                        <th>入驻类型</th>
                        <th>申请人</th>
                        <th>手机号</th>
                        <th>邮箱</th>
                        <th>申请时间</th>
                        <th>用户ID</th>
                        <th>身份证照片</th>
                        <th v-if="navType!=0">营业执照</th>
                        <th>状态</th>
                        <th>所属卖场</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(v,i) in tableList" :key="i">
                        <td>
                            <font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
                        </td>
                         <td>{{v.apply_id}}</td>
                        <td>{{v.type=='designer_per'?'设计师':v.type=='designer'?'装修公司':v.type=='builder'?'施工队':v.type=='shop'?'商家':v.type=='maker'?'创客机构':''}}</td>
                        <td>{{v.name}}</td>
                        <td>{{v.mobile}}</td>
                        <td>{{v.mail}}</td>
                        <td>{{$moment(v.apply_time*1000).format('YYYY-MM-DD')}}</td>
                        <td>{{v.user_id}}</td>
                        <td>
                            <div :data-index="i" class="toLook" @click="toLook(v.id_card_top,v.id_card_back,i,$event)">点击查看
                                <!-- 弹出框 -->
                                <div class="idcardImg">
                                    <el-dialog
                                        title="身份证照片"
                                        :visible.sync="dialogVisible"
                                        width="950px"
                                        top="150px">
                                        <div class="dialog-footer">
                                            <div>
                                                <div class="tit">身份证正面</div>
                                                <img :src="id_card_top" mode="" />
                                            </div>
                                            <div>
                                                <div class="tit">身份证反面</div>
                                                <img :src="id_card_back" mode="" />
                                            </div>
                                        </div>
                                        <span slot="footer" class="dialog-footer-btn">
                                            <el-button type="primary" @click="dialogVisible = false">返回</el-button>
                                        </span>
                                    </el-dialog>
                                </div>
                            </div>
                        </td>
                        <td v-if="navType!=0">
                            <div :data-index="i" class="toLook toLookLicense" @click="toLookLicense(v.license,i,$event)">点击查看
                                <!-- 营业执照弹出框 -->
                                <div class="idcardImg">
                                    <el-dialog
                                            title="营业执照"
                                            :visible.sync="dialogVisible_lic"
                                            width="760px"
                                            top="150px"
                                            :before-close="handleClose_lic">
                                            <div class="dialog-footer">
                                                <img :src="license" mode="" />
                                            </div>
                                            <span slot="footer" class="dialog-footer-btn">
                                                <el-button type="primary" @click="dialogVisible_lic = false">返回</el-button>
                                            </span>
                                        </el-dialog>
                                </div>
                            </div>
                        </td>
                        <td>{{v.is_ban==0?'服务中':v.is_ban==1?'禁用':''}}</td>
                        <td>{{v.market_name}}</td>
                        <td>
                            <button class="shelves" :class="{'delete':v.is_ban==1}" :data-index="i" @click="toStop(v.apply_id,i,$event)">{{v.is_ban==1?'恢复':v.is_ban==0?'禁用':''}}</button>
                            <!-- <button class="delete" :data-index="i" @click="recoSercive(v.apply_id,i,$event)">恢复</button> -->
                            <div class="operationInfo">
                                <!--禁用或恢复弹出框  -->
                                <el-dialog
                                    title="请输入操作原因"
                                    :close-on-press-escape="false"
                                    :close-on-click-modal="false"
                                    :visible.sync="dialogVisible_refu"
                                    width="760px"
                                    top="150px"
                                    :before-close="handleClose_refu">
                                    <textarea type="text" v-model="operationInfo" placeholder="请输入"></textarea>
                                    <h4 v-if="operationStatus">{{btnText}}原因必填！</h4>
                                    <span slot="footer" class="dialog-footer-btn">
                                        <el-button @click="dialogVisible_refu = false;operationStatus=false">返回</el-button>
                                        <el-button type="primary" @click="toReject">确定</el-button>
                                    </span>
                                </el-dialog>
                            </div>
                        </td>
                    </tr>
                    <tr v-if="tableList.length == 0"><td class="table_title" colspan="15">当前数据空空如也</td></tr>
                </table>
            </div>
        </div>
        

        <!-- 表格（装修管家） -->

        <!-- 全选与分页 -->
        <div class="needExa_bottom_page">
            <div class="needExa_bottom_page_left">
                <div class="needExa_bottom_page_left_checkAll" @click="handerCheckAll">
                    <font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
                </div>全选
                <!-- <button class="needExa_bottom_page_left_btn" @click="selectDel">删除</button> -->
            </div>
            <div class="needExa_bottom_page_right">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    background>
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            user_id:null,
            activeName:'first',
            navTab:['设计师','装饰公司','施工队','商家','装修公司','创客机构'],
            navIndex:0,
            navType:null,  //角色类型
            lookIndex:null,
            dialogVisible:false,
            tableList:[],
            checkAll:false,
			page:1,
			pageSize:10,
			total:0,
            checkBoxAll:[],			    // 选中的数据
			shelvesAlls:[],
            dialogVisible_lic:false,   //营业执照弹出框
            dialogVisible_refu:false,  //禁用或恢复弹框
            operationInfo:'',          //操作原因
            btnText:'',                //禁用或恢复按钮文字
            operationStatus:false,     //操作原因
            rowId:null,                //数据的appl_id
            license:'',                //营业执照
            id_card_top:'',            //身份证正面
            id_card_back:'',           //身份证反面
            marketId: "", //卖场id
            marketList: [],
        }
    },
    mounted(){
        let user_id = localStorage.getItem('user_id')
        this.user_id = Number(user_id)
        this.getPassList(this.navIndex)
        this.remoteMethod();
    },
    methods:{
        // 获取卖场列表
        remoteMethod() {
          this.$http.post("/api/root/Market/marketList").then((res) => {
            console.log(res, "卖场列表");
            if (res.code == 1) {
              this.marketList = res.data ? res.data : [];
            }
          });
        },
        // 选择卖场
        selectMarket() {
          this.page = 1
          this.pageSize = 10
          this.getPassList(this.navIndex);
        },

        // 获取通过审批列表
        getPassList(nav){
            this.navType = nav
            let type = nav==0?'designer_per':nav==1?'designer':nav==2?'builder':nav==3?'shop':nav==4?'decoration':nav==5?'maker':'';
            this.$http.post('/api/root/Approval/index',{
                user_id:this.user_id,
                status:1,page:this.page,
                pagesize:this.pageSize,
                type,
                market_id:this.marketId
              }).then(res=>{
                console.log(res);
                if(res.code==1){
                    this.tableList = res.data.list?res.data.list:[];
                    this.total = res.data.total
                }
            })
        },

        // 点击头部nav
        navFn(e){
            this.page = 1
            this.pageSize = 10
            console.log(e.target.dataset.index);
            this.navIndex = e.target.dataset.index;
            this.getPassList(this.navIndex)

        },
        // 点击禁用
        toStop(id,i,e){
            this.rowId = id
            this.btnText = e.toElement.innerText;
            this.lookIndex = e.target.dataset.index
            if(this.lookIndex==i){
                this.dialogVisible_refu=true
            }
        },

        // 点击恢复或禁用弹框中的确定
        toReject(){
            let status = this.btnText=='禁用'?0:this.btnText=='恢复'?1:null;
            if(this.operationInfo!=''){
                this.$http.post('/api/root/Approval/accountStatus',{user_id:this.user_id,apply_id:this.rowId,status,reason:this.operationInfo}).then(res=>{
                    console.log(res);
                    if(res.code==1){
                        this.operationInfo = '',
                        this.dialogVisible_refu = false
                        this.getPassList(this.navIndex)
                        this.$message.success('操作成功')
                    }else{
                        console.log(this);
                        this.$message({
                            showClose: true,
                            message: res.msg,
                            type: "error"
                        });
                        this.operationInfo = '',
                        this.dialogVisible_refu = false
                    }
                })
            }else{
                this.operationStatus = true
            }
        },


        handleClose_refu(){
            this.dialogVisible_refu = false;
            this.operationStatus = false
        },

        // 点击查看身份证
        toLook(id_card_top,id_card_back,i,e){
            console.log(i,e);
            this.lookIndex = e.target.dataset.index
            if(this.lookIndex==i){
            this.dialogVisible=true
            this.id_card_top = id_card_top
            this.id_card_back = id_card_back
            }
        },

        handleClose(){
            this.dialogVisible = false
        },

        // 点击查看营业执照
        toLookLicense(license,i,e){
            this.lookIndex = e.target.dataset.index
            if(this.lookIndex==i){
            this.dialogVisible_lic=true
            this.license = license
            }
        },

        handleClose_lic(){
            this.dialogVisible_lic = false
        },



         // 多选
			handlerCheckbox(i){
                console.log(i);
				let arr = this.checkBoxAll;
				if(arr.includes(i)){
					let index = arr.indexOf(i);
					if(index > -1){
						arr.splice(index,1);
						if(this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				}else {
					this.checkBoxAll.push(i);
					if(this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				this.shelvesAlls.push(this.tableList[i].product_id);
			},
            // 全选与全不选
			handerCheckAll(){
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				if(this.checkAll){
					for(let i=0;i<arr;i++){
						this.checkBoxAll.push(i);
					}
				}else {
					this.checkBoxAll = [];
				}
				// 去重
				let res = this.checkBoxAll;
				for(let i=0;i<res.length;i++){
					for(let j=i+1;j<res.length;j++) {
						if(res[i] == res[j]) {
							res.splice(j,1);
							j--;
						}
					}
				};
                this.checkBoxAll.map(v => {
					return this.shelvesAlls.push(this.tableList[v].store_id.toString());;
				})
			},

        // 全选中删除
        // selectDel(){

        // },

         //分页
			handleSizeChange(val) {
        this.page = 1
				this.pageSize = val;
				console.log(val);
				this.getPassList(this.navIndex)
			},
			handleCurrentChange(val) {
			    this.page = val;
				console.log(val);
				this.getPassList(this.navIndex)
			},
    }
}
</script>

<style lang="less" scoped>
@import 'passExamine.less';
</style>

